<template>
  <div>
    <el-form class="m7-form accessForm" :rules="rules"
      size="mini" :model="accessForm"
      ref="accessForm" label-position="top">
      <el-form-item label="渠道名称" prop="name">
        <el-input v-model.trim="accessForm.name" placeholder="请输入渠道名称" size="mini"></el-input>
      </el-form-item>
      <!-- <el-form-item label="域名" prop="accessUrl">
        <el-input v-model.trim="accessForm.accessUrl" placeholder="请输入域名" size="mini"></el-input>
      </el-form-item> -->
      <el-form-item label="网页标题" prop="title">
        <el-input v-model.trim="accessForm.title" placeholder="请输入网页标题" size="mini"></el-input>
      </el-form-item>
      <!-- <el-form-item label="使用流程" prop="useProcess">
        <el-radio v-model="accessForm.useProcess" :label="true">是</el-radio>
        <el-radio v-model="accessForm.useProcess" :label="false">否</el-radio>
      </el-form-item> -->
      <el-form-item label="会话流程" prop="processId">
        <m7Select filterable
         v-model="accessForm.processId"
         size="mini" :options="processData"
         :defaultProps="{value: '_id', label: 'name'}"
         placeholder="请选择">
        </m7Select>
      </el-form-item>
      <!-- <el-form-item label="转技能组" prop="toPeer" v-else>
        <m7Select filterable
         v-model="accessForm.toPeer"
         size="mini" :options="processData"
         :defaultProps="{value: 'value', label: 'label'}"
         placeholder="请选择">
        </m7Select>
      </el-form-item> -->
      <el-form-item label="样式" prop="cssTmpId">
        <m7Select filterable
         v-model="accessForm.cssTmpId"
         size="mini" :options="cssTemData"
         :defaultProps="{value: '_id', label: 'name'}"
         placeholder="请选择">
        </m7Select>
      </el-form-item>
      <el-form-item label="满意度评价" prop="isSatisfaction">
        <el-switch
          v-model="accessForm.isSatisfaction"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
      <el-form-item prop="openSessionInvitation">
        <span slot="label">
          启用自动会话邀请
          <el-tooltip class="item" effect="dark" content="启用后，系统可向正在访问网站的访客发起会话邀请" placement="top">
            <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
          </el-tooltip>
        </span>
        <el-switch
          v-model="accessForm.isOpenSessionInvitation"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        <span @click="dialogVisible = true" class="invitation">邀请参数设置</span>
      </el-form-item>
      <el-form-item prop="openAssistance">
        <span slot="label">
          启用智能辅助
        </span>
        <el-switch
          v-model="accessForm.isEnableRobotAssist"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
    </el-form>
    <el-dialog
      title="邀请参数设置"
      :visible.sync="dialogVisible"
      append-to-body
      :before-close="invitationCancel"
      width="38%">
      <el-form class="m7-form invitationForm"
        size="mini" :model="invitationForm"
        ref="invitationForm" label-position="top">
        <el-form-item label="邀请方式">
          <el-radio v-model="invitationForm.invitationWay" label="inviteBox">邀请框</el-radio>
          <el-radio v-model="invitationForm.invitationWay" label="sessionBox">自动弹出会话框</el-radio>
        </el-form-item>
        <el-form-item label="邀请框弹出设置">
          <el-time-picker
            is-range
            arrow-control
            value-format='HH:mm:ss'
            v-model="invitationForm.popUpTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item v-if="invitationForm.invitationWay === 'inviteBox'">
          <p>访客访问网站
            <el-input
              class="numInput" v-model.trim="invitationForm.inviteBoxSettings.watingTime"
              size="mini" type="number" @change="iptChange($event, {type: 'watingTime', value: 'inviteBoxSettings'})">
            </el-input>
            <el-tooltip class="item" effect="dark" content="0s表示立即弹出" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
            s后立即弹出
          </p>
          <p>发出邀请
            <el-input class="numInput" v-model.trim="invitationForm.inviteBoxSettings.showDuration"
              size="mini" type="number" @change="iptChange($event, {type: 'showDuration', value: 'inviteBoxSettings'})">
            </el-input>
            <el-tooltip class="item" effect="dark" content="0s表示不进行下一步操作" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
            s后未接受邀请，则：
            <el-radio v-model="invitationForm.inviteBoxSettings.afterShowOperate" label="hidden">隐藏邀请框</el-radio>
            <el-radio v-model="invitationForm.inviteBoxSettings.afterShowOperate" label="newChat">自动弹出会话框</el-radio>
          </p>
        </el-form-item>
        <el-form-item v-else>
          <p>访客访问网站
            <el-input class="numInput" v-model.trim="invitationForm.sessionBoxSettings.watingTime"
             size="mini" type="number" @change="iptChange($event, {type: 'watingTime', value: 'sessionBoxSettings'})"></el-input>
            <el-tooltip class="item" effect="dark" content="0s表示立即弹出" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
            s后立即弹出
          </p>
          <p>访客关闭或最小化聊天框
            <el-input class="numInput" v-model.trim="invitationForm.sessionBoxSettings.autoShowV7IframeTime"
              size="mini" type="number" @change="iptChange($event, {type: 'autoShowV7IframeTime', value: 'sessionBoxSettings'})"></el-input>
            <el-tooltip class="item" effect="dark" content="0s表示不重复弹出" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
            s秒后再次弹出
          </p>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="invitationCancel">取 消</el-button>
        <el-button type="primary" @click="invitationSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
import { deepClone } from '@/utils/common'
interface ArrarObj {
  String
}
interface AccessForm {
  inviteParamSettings: InvitationForm
  name: string
  title: string
  processId: string
  cssTmpId: string
  _id: string
  isSatisfaction: boolean
  satisfactionId: string
  isOpenSessionInvitation: boolean
  isEnableRobotAssist: boolean // 启用智能辅助
}

interface InviteSettings {
  watingTime: number
  showDuration?: number
  afterShowOperate?: string
  autoShowV7IframeTime?: number
}
interface InvitationForm {
  invitationWay: string
  popUpTime: any
  inviteBoxSettings: InviteSettings
  sessionBoxSettings: InviteSettings
}

const accessFormTem = {
  name: '',
  title: '',
  processId: '',
  cssTmpId: '',
  isSatisfaction: true,
  satisfactionId: '',
  isOpenSessionInvitation: false,
  isEnableRobotAssist: false
}

const invitationFormTep = {
  invitationWay: 'inviteBox',
  popUpTime: ['08:00:00', '18:00:00'],
  inviteBoxSettings: {
    watingTime: 5,
    showDuration: 2,
    afterShowOperate: 'hidden'
  },
  sessionBoxSettings: {
    watingTime: 5,
    autoShowV7IframeTime: 0
  }
}
@Component({
  name: 'accessAddOrEdit'
})
export default class AccessAddOrEdit extends Vue {
  @Prop(Array) private cssTemData!: ArrarObj[]
  private $store: any
  private $message: any

  private dialogVisible: boolean = false // 会话邀请弹窗

  get processData () { // 获取流程信息
    return this.$store.state.common.publicCache.processList || []
  }

  private rules = {
    name: [{ required: true, trigger: 'blur', message: '请输入渠道名称' }],
    processId: [{ required: true, trigger: 'change', message: '请选择会话流程' }],
    cssTmpId: [{ required: true, trigger: 'change', message: '请选择样式' }]
  }

  private editInvitationObj: any = {}

  public invitationForm: InvitationForm = {
    invitationWay: 'inviteBox',
    popUpTime: ['08:00:00', '18:00:00'],
    inviteBoxSettings: {
      watingTime: 5,
      showDuration: 2,
      afterShowOperate: 'hidden'
    },
    sessionBoxSettings: {
      watingTime: 5,
      autoShowV7IframeTime: 0
    }
  }

  public accessForm: any = {
    name: '', // 渠道名称
    title: '', // 网页标题
    processId: '', // 流程
    cssTmpId: '', // 样式
    isSatisfaction: true, // 满意度
    satisfactionId: '', // 满意度模板id
    isOpenSessionInvitation: false, // 是否开启会话邀请
    isEnableRobotAssist: false // 是否启动自动智能辅助
  }

  public setAccessData (data?: AccessForm) { // 赋值信息事件
    if (data) {
      const { name, title, processId, cssTmpId, _id, isSatisfaction, satisfactionId, isOpenSessionInvitation, isEnableRobotAssist } = data
      this.accessForm = {
        _id,
        name,
        title,
        processId,
        cssTmpId,
        isSatisfaction: isSatisfaction === undefined ? false : isSatisfaction,
        satisfactionId: satisfactionId || this.accessForm.satisfactionId,
        isOpenSessionInvitation,
        isEnableRobotAssist
      }
      if (data.inviteParamSettings) {
        const { invitationWay, popUpTime, inviteBoxSettings, sessionBoxSettings } = data.inviteParamSettings
        this.invitationForm = {
          invitationWay,
          popUpTime,
          inviteBoxSettings,
          sessionBoxSettings
        }
        this.editInvitationObj = deepClone(data.inviteParamSettings)
      } else {
        this.invitationForm = deepClone(invitationFormTep)
      }
    } else {
      this.accessForm = deepClone(accessFormTem)
      this.invitationForm = deepClone(invitationFormTep)
      this.editInvitationObj = {}
    }
  }

  private invitationSure () {
    if (this.invitationForm.popUpTime === null) {
      this.$message.error('请选择邀请框弹出设置')
      return false
    }
    this.invitationForm.inviteBoxSettings.watingTime = Number(this.invitationForm.inviteBoxSettings.watingTime)
    this.invitationForm.inviteBoxSettings.showDuration = Number(this.invitationForm.inviteBoxSettings.showDuration)
    this.invitationForm.sessionBoxSettings.watingTime = Number(this.invitationForm.sessionBoxSettings.watingTime)
    this.invitationForm.sessionBoxSettings.autoShowV7IframeTime = Number(this.invitationForm.sessionBoxSettings.autoShowV7IframeTime)
    if (
      this.invitationForm.inviteBoxSettings.watingTime < 0 ||
      this.invitationForm.inviteBoxSettings.showDuration < 0 ||
      this.invitationForm.sessionBoxSettings.watingTime < 0 ||
      this.invitationForm.sessionBoxSettings.autoShowV7IframeTime < 0) {
      this.$message.error('请输入正整数')
      return false
    }
    this.dialogVisible = false
  }

  private iptChange (val: number, obj) {
    if (Number(val) < 0) {
      this.invitationForm[obj.value][obj.type] = 0
      this.$message.error('必须为正数')
    }
  }

  private invitationCancel () {
    this.invitationForm = Object.keys(this.editInvitationObj).length > 0 ? this.editInvitationObj : deepClone(invitationFormTep)
    this.dialogVisible = false
  }
}
</script>
<style lang="stylus" scoped>
.V7_iconV7tubiao_bangzhu-42
  font-size 12px
  color #B3B9C7
  cursor pointer
.invitation
  font-size 12px
  cursor pointer
  margin-left 5px
  color #008BEE
.invitationForm
  p
   margin 12px 0px
   font-size 12px
  .numInput
    width 15%
    margin 0px 5px
</style>
